<template>
  <div class="app-container">    
    <div class="block block-1" ref="postHtml1"></div>
    <div class="block block-2" ref="postHtml2"></div>
    <img :src="imgUrl1" alt="">
    <img :src="imgUrl2" alt="">
    <el-button type="primary" @click="createPoster">截取1</el-button>
  </div>
</template>

<script>

import html2canvas from "html2canvas";
import axios from 'axios'
import { getToken } from "@/utils/auth";
import { dataURLtoBlob, blobToFile } from '@/utils/tools'
export default {
  data() {
    return {
      imgUrl1: '',
      imgUrl2: '',
      bgSrc: 'http://xtbapp1.su.bcebos.com/QRCode/image/2023/37010ec1-49dd-4403-a87c-4f27afa6b71b.png',
    };
  },
  mounted(){
    let _self = this   
  },
  methods: {
    makeCanvas(params){
      let _self = this
      return new Promise((resolve, reject) => {
        html2canvas(params.domObj, {
          allowTaint: true,
          useCORS: true,
          width: params.clientWidth,
          height: params.clientHeight,
          scrollY: -18,
          scrollX: -0,
          onclone(doc) {}
        }).then(canvas => {
          _self.downloadQRImg(canvas, params.name);
          /** 新Image对象，可以理解为DOM */
          let image = new Image();
          /** 解决跨域 Canvas 污染问题 */
          image.setAttribute("crossOrigin", "anonymous");
          let imgUrl = canvas.toDataURL("image/png");
          // this.imgUrl1 = imgUrl1
          resolve(imgUrl)
        });
      })
    },
    /** 将html元素转换成海报图片 */
    async createPoster() {
      const posterHtml1 = this.$refs.postHtml1;
      const posterHtml2 = this.$refs.postHtml2;
      const img1 = await this.makeCanvas({
        domObj: posterHtml1, 
        clientHeight: posterHtml1.clientHeight, 
        clientWidth: posterHtml1.clientWidth, 
        name: '1'
      })
      const img2 = await this.makeCanvas({
        domObj: posterHtml2, 
        clientHeight: posterHtml2.clientHeight, 
        clientWidth: posterHtml2.clientWidth, 
        name: '2'
      })
      const img3 = await this.composeImgs(
        { url: img1, 
          width: posterHtml1.clientWidth,
          height: posterHtml1.clientHeight,
        }, {
          url: img2, 
          width: posterHtml2.clientWidth,
          height: posterHtml2.clientHeight,
        })
      this.imgUrl1 = img3
    },
    /** 根据URL下载图片 */
    downloadQRImg(canvas, name) {
      /** 新Image对象，可以理解为DOM */
      let image = new Image();
      /** 解决跨域 Canvas 污染问题 */
      image.setAttribute("crossOrigin", "anonymous");
      let imgUrl1 = canvas.toDataURL("image/png");
      this.imgUrl1 = imgUrl1
      // image.src = imgUrl;
      // const blob = dataURLtoBlob(imgUrl);
      // const file = blobToFile(blob, "业主签字.png");
      // const formData = new FormData();
      // formData.append("file", file);
      // let headers = {
      //   Authorization: getToken(),
      // }
      // axios({
      //   method: 'post',
      //   url: process.env.VUE_APP_BASE_API + "/common/uploadOss",
      //   data: formData,
      //   headers: headers
      // }).then(res => {
      //   console.log(res, 9999)
      // })
    },
    // 合成图片
    composeImgs(img1, img2) {
      return new Promise((resolve, reject) => {
        // 1，先创建一个画布
        let canvas = document.createElement('canvas');
        //2，创建画笔
        const context = canvas.getContext('2d');
        //3，设置背景的宽高
        canvas.width = img1.width;
        canvas.height = img1.height + img2.height;
        const myImage1 = new Image();
        myImage1.src = img1.url;
        myImage1.crossOrigin = 'Anonymous';
        myImage1.onload = () => {
          context.drawImage(myImage1, 0, 0, img1.width, img1.height); // 设置坐标并绘制
          const myImage2 = new Image();
          myImage2.src = img2.url;
          myImage2.crossOrigin = 'Anonymous';
          myImage2.onload = () => {
            context.drawImage(myImage2, 0, img1.height, img2.height, img2.height);
            const base64 = canvas.toDataURL('image/png'); //获取base64的图片流
            resolve(base64); // 成功之后返回图片路径
          };
        };
      });
    },
  }
};
</script>
<style scoped lang="scss">
.block{
  border-radius: 10px;
  width: 200px;
  height: 200px;
  &.block-1{
    background-color: #aff;
  }
  &.block-2{
    background-color: #fdd;
  }
}
</style>